---
import { getCollection } from "astro:content";
import EnvelopeIcon from "~icons/ph/envelope-duotone";
import GithubLogoIcon from "~icons/ph/github-logo-duotone";
import LinkedinLogoIcon from "~icons/ph/linkedin-logo-duotone";
import TwitterLogoIcon from "~icons/ph/twitter-logo-duotone";
import CvLogoIcon from '~icons/ph/read-cv-logo-duotone'
import MainLayout from "~/layouts/MainLayout.astro";
import siteData from "~/data/sites";
import WorkExperienceSection from "~/components/section/WorkExperienceSection.svelte";
import ProjectSection from "~/components/section/ProjectSection.svelte";
import BlogSection from "~/components/section/BlogSection.svelte";
import { workExperiences } from "~/data/work-experience";

const socials = [
	{ icon: EnvelopeIcon, link: siteData.email, label: "邮箱" },
	{ icon: GithubLogoIcon, link: siteData.github, label: "Github" },
	{ icon: LinkedinLogoIcon, link: siteData.linkedin, label: "LinkedIn" },
	{ icon: TwitterLogoIcon, link: siteData.twitter, label: "Twitter" },
	{ icon: CvLogoIcon, link: siteData.cv, label: "查看我的简历" },
]

const personalProjects = await getCollection("projects", ({ data }) => data.type === "personal" && data.featured);
const sortedPersonalProjects = personalProjects.sort((a, b) => (a.data.date > b.data.date ? -1 : 1));

const openSourceProjects = await getCollection("projects", ({ data }) => data.type === "open-source" && data.featured);
const sortedOpenSourceProjects = openSourceProjects.sort((a, b) => (a.data.date > b.data.date ? -1 : 1));

const posts = await getCollection("posts", ({ data }) => !data.draft);
const sortedPosts = posts.sort((a, b) => (a.data.date > b.data.date ? -1 : 1));
---

<MainLayout seo={{ title: "首页" }}>
	<main class="mx-auto max-w-[920px] px-2 md:px-4 py-10">
		<header class="flex border-b border-pink-800 border-dashed border-spacing-lg pb-6">
			<div class="flex-1">
				<h1 class="text-xl md:text-2xl font-bold font-serif text-pink-950">
					Dicha Zelianivan Arkana V1
				</h1>
				<p class="text-sm md:text-base leading-relaxed font-serif text-pink-950/80 py-2 max-w-60ch">
					专注于交付高质量软件的软件工程师，致力于解决用户问题。
				</p>
				<div class="flex items-center gap-2 pt-2">
					{socials.map((social) => (
						<a
							href={social.link}
							class="text-pink-950/80 hover:text-pink-950 p-1 rounded-md border border-pink-300"
							target="_blank"
							rel="noopener noreferrer"
							aria-label={social.label}
						>
							<social.icon />
						</a>
					))}
				</div>
			</div>
			<a
				href={siteData.github}
				target="_blank"
				rel="noopener noreferrer"
				class="relative w-24 h-24 md:w-36 md:h-36 bg-pink-100 border border-pink-300 rounded-lg"
			>
				<img
					src="https://avatars.githubusercontent.com/u/51877647?v=4"
					alt="@elianiva"
					class="w-full h-full object-cover rounded-lg"
				/>
				<div class="absolute inset-0 bg-pink-300/25 rounded-lg" />
			</a>
		</header>
		<section class="pt-6 md:pt-10">
			<h2 class="text-xl md:text-2xl font-bold font-serif text-pink-950 pb-4">关于我</h2>
			<p class="text-sm md:text-base leading-relaxed font-serif text-pink-950/80">
				一名拥有超过4年软件开发经验的软件工程师。我的经验主要集中在Web开发，但我也对其他平台持开放态度，只要它们能帮助人们解决问题。我主要使用Typescript、React、Svelte和Node.js进行开发。目前是马琅国立理工学院信息技术工程专业的本科生。能流利地说印尼语和英语，目前正在学习日语。
			</p>
		</section>
		<WorkExperienceSection client:visible workExperiences={workExperiences} />
		<ProjectSection
			title="个人项目"
			description="这些是我在过去制作的一些个人项目。其中一些仍在使用，有些则不再使用。大部分项目都是为了娱乐和学习新东西而制作的。"
			projects={sortedPersonalProjects}
			seeMoreUrl="/projects"
		/>
		<ProjectSection
			title="开源项目"
			description="这些是我积极参与维护的一些开源项目。其中大部分来自Teknologi Umum，这是我参与的一个社区。"
			projects={sortedOpenSourceProjects}
		/>
		<BlogSection client:visible posts={sortedPosts} />
	</main>
</MainLayout>